<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导师个人主页</title>
  <link rel="stylesheet" href="../static/plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <div class="d-flex flex-grow-1 justify-content-center">
        <a class="navbar-brand" href="#">
          <img src="../static/img/bjfu.png" alt="北京林业大学" style="width: 162px;">
        </a>
        <h1 class="navbar-text" style="color: green; margin: 0;">北京林业大学导师后台</h1>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <div class="row">
      <div class="col-md-3">
        <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <form action="{url ''}" method="GET">
            {% csrf_token %}
            <input type="hidden" name="tn" value="{{ teacher_info.id }}" readonly>
            <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home"
              type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">主页</button>
          </form>
          <form id="student-management-form" method="post" style="display: inline;">
            {% csrf_token %}
            <input type="hidden" name="tech_no" value="{{ teacher_info.id }}">
            <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile"
              type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">学生管理</button>
          </form>
          <form action="">
            {% csrf_token %}
            <input type="hidden" name="tn" value="{{ teacher_info.id }}">
            <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages"
              type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">个人信息</button>
          </form>
          <!-- <form action="">
            {% csrf_token %}
            <input type="hidden" name="tn" value="{{ teacher_info.id }}">
            <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings"
              type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">设置</button>
          </form> -->
        </div>
      </div>

      <div class="col-md-9">
        <div class="tab-content" id="v-pills-tabContent">
          <!-- 主页 -->
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"
            tabindex="0">
            <h4>主页</h4>
            <p><strong>导师姓名：</strong>{{ teacher_info.name }}</p>
            <p><strong>研究方向：</strong>{{teacher_info.instructorbio}}</p>
            <p><strong>研究学科：</strong>{{teacher_info.instructorsubject}}</p>
            <p><strong>导师类型：</strong>{{teacher_info.instructortype}}</p>
          </div>

          <!-- 学生管理 -->
          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"
            tabindex="0">
            <h4>学生管理</h4>
            <table class="table" id="students-table">
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>考号</th>
                  <th>初试成绩</th>
                  <th>复试成绩</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="stu_info">
                <!-- 学生数据将通过 JavaScript 渲染 -->
              </tbody>
            </table>
          </div>

          <!-- 个人信息 -->
          <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"
            tabindex="0">
            <h4>个人信息</h4>
            <form method="post"  action="{%url 'input_teacher_info'%}" >
              {% csrf_token %}
              <div class="mb-3">
                <label for="name" class="form-label">工号</label>
                <input type="text" class="form-control" name="teacher_id" id="name" value="{{ teacher_info.id }}">
              </div>
              <div class="mb-3">
                <label for="name" class="form-label">姓名</label>
                <input type="text" class="form-control" name="teacher_name" id="name" value="{{ teacher_info.name }}">
              </div>
              <div class="mb-3">
                <label for="research" class="form-label">导师简介</label>
                <input type="text" class="form-control" name="teacher_bio" id="research" value="{{teacher_info.instructorbio}}">
              </div>
              <div class="mb-3">
                <label for="projects" class="form-label">邮箱</label>
                <input class="form-control" id="projects" name="teacher_email" value="{{teacher_info.instructoremail}}" ></input>
              </div>
              <div class="mb-3">
                <label for="projects" class="form-label">电话</label>
                <input class="form-control" id="projects" name="teacher_phone" value="{{teacher_info.instructorphone}}" ></input>
              </div>
              <div class="mb-3">
                <label for="achievements" class="form-label">指导学科</label>
                <input class="form-control" id="achievements" name="teacher_subject" value="{{teacher_info.instructorsubject}}" ></input>
              </div>
              <button type="submit" class="btn btn-primary">保存修改</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../static/plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // 提交个人信息表单
      const teacherInfoForm = document.querySelector('form[action="{% url 'input_teacher_info' %}"]');
      const submitButton = teacherInfoForm.querySelector('button[type="submit"]');
  
      submitButton.addEventListener('click', function (event) {
        event.preventDefault(); // 防止默认的表单提交行为
  
        const formData = new FormData(teacherInfoForm);
        
        // 添加 CSRF 令牌到请求头
        const csrfToken = '{{ csrf_token }}'; // Django 模板中的 CSRF 令牌
        axios.defaults.headers.common['X-CSRFToken'] = csrfToken;
  
        axios.post(teacherInfoForm.action, formData)
          .then(function (response) {
            alert(response.data.message); // 显示后端返回的消息
            if (response.status === 200) {
              teacherInfoForm.reset(); // 清空表单（可选）
              // 这里可以添加额外的逻辑，例如更新页面内容等
            }
          })
          .catch(function (error) {
            if (error.response && error.response.data) {
              alert(error.response.data.message); // 显示后端返回的错误消息
            } else {
              alert('发生错误，请稍后再试。'); // 显示默认错误消息
            }
          });
      });
      
      const viewStudentsButton = document.getElementById('v-pills-profile-tab');
      viewStudentsButton.addEventListener('click', function () {
        // 发送 AJAX 请求获取学生数据
        const formData = new FormData(document.getElementById('student-management-form'));
        
        // 添加 CSRF 令牌到请求头
        const csrfToken = '{{ csrf_token }}'; // Django 模板中的 CSRF 令牌
        axios.defaults.headers.common['X-CSRFToken'] = csrfToken;
  
        axios.post('http://127.0.0.1:8000/tech_stu_info/', formData)
          .then(function (response) {
            const students = response.data.students;
            const tableBody = document.querySelector('#stu_info');
            tableBody.innerHTML = ''; // 清空表格
  
            students.forEach(student => {
              const row = document.createElement('tr');
              row.innerHTML = `
                        <td>${student.name}</td>
                        <td>${student.examnumber}</td>
                        <td>
                            英语: ${student.englishscore},
                            数学: ${student.mathscore},
                            专业: ${student.majorscore},
                            政治: ${student.politicalscore}
                        </td>
                        <td>
                            听力及口语: ${student.englishskills},
                            专业知识: ${student.majorknowledge},
                            综合素质: ${student.overallquality}
                        </td>
                        <td>
                            ${student.status === '1' ?
                  '<span style="color: green;">该学生已被接受</span>' :
                  `
                                      <button class="btn btn-danger btn-sm" onclick="handleStudentDecision('${student.examnumber}', 'reject')">拒绝</button>
                                      <button class="btn btn-success btn-sm" onclick="handleStudentDecision('${student.examnumber}', 'accept')">接受</button>
                                  `
              }
                        </td>
                    `;
              tableBody.appendChild(row); 
            });
          })
          .catch(function (error) {
            console.error("There was an error fetching the student data!", error);
          });
      });
    });
  
    // 处理按钮点击事件
    function handleStudentDecision(examNumber, action) {
      // 创建表单数据
      const formData = new FormData();
      formData.append('exam_number', examNumber);
      formData.append('action', action); // 可以是 'accept' 或 'reject'
  
      // 添加 CSRF 令牌到请求头
      const csrfToken = '{{ csrf_token }}'; // Django 模板中的 CSRF 令牌
      axios.defaults.headers.common['X-CSRFToken'] = csrfToken;
  
      // 发送 POST 请求到 Django 后台
      axios.post('http://127.0.0.1:8000/test/', formData)
        .then(function (response) {
          console.log(response.data.message); // 假设后端返回一个消息
          alert(response.data.message); // 显示消息
        })
        .catch(function (error) {
          console.error("There was an error processing the decision!", error);
        });
    }
  </script>
</body>

</html>